<template>
  <div id="app">
    <h2>选择 VelocityUi 特效查看</h2>
    <div class="tip">
      <div>Will Leave</div>
      <div>Will Enter</div>
    </div>
    <div class="demo-box">
      <!-- 退出 -->
      <transition v-on:leave="animateJs" v-bind:css="false">
        <div v-if="isShow"></div>
      </transition>
      <!-- 进入 -->
      <transition v-on:enter="animateJs" v-bind:css="false">
        <div v-if="!isShow"></div>
      </transition>
    </div>

    <div class="top">
      <div class="select item">
        <select v-model="selected" @change="autoHandler">
          <option disabled value>请选择</option>
          <option v-for="(item,index) in list" :value="item" :key="index">{{`${index+1}.${item}`}}</option>
        </select>
      </div>

      <div class="btn-click item" @click="btnHandler">查看@!</div>
    </div>
    <div class="error">{{error}}</div>
    <div class="option-box">
      <div class="duration-option item">
        <span>延迟时间</span>
        <input type="number" min="0" v-model="duration" placeholder="请输入正整数,默认650" />(ms)
      </div>
      <div class="auto-option item">
        <div class="label-auto">
          <label for="inputAuto">自动播放模式</label>
        </div>
        <div class="input-auto">
          <input id="inputAuto" type="checkbox" v-model="isAuto" />
        </div>
      </div>
    </div>

    <pre v-if="selected" class="code">{{code}}</pre>
  </div>
</template>

<script>
import { list } from "./public/name.js";
import "./node_modules/velocity-animate/velocity";
import "./node_modules/velocity-animate/velocity.ui";
export default {
  name: "App",
  data() {
    return {
      list,
      isAuto: false,
      isShow: true,
      isShowOut: true,
      isShowIn: false,
      duration: "650",
      selected: "",
      error: ""
    };
  },
  methods: {
    btnHandler() {
      if (this.selected) {
        this.isShow = false;
        this.error = "";
      } else {
        this.error = "请选择特效";
      }
    },
    autoHandler() {
      if (this.isAuto) {
        this.btnHandler();
      }
    },
    animateJs(el, done) {
      window.Velocity(el, this.selected, {
        duration: this._duration,
        complete: () => {
          done();
          setTimeout(() => {
            this.isShow = true;
          }, 500);
        }
      });
    }
  },
  computed: {
    _duration() {
      return this.duration < 0 ? 0 : this.duration;
    },
    code() {
      if (this.selected) {
        return `
<template>
    <transition v-on:leave="animateJs" v-bind:css="false">
      <div v-if="isShow"></div>
    </transition>

    <!-- Or -->

    <transition v-on:enter="animateJs" v-bind:css="false">
      <div v-if="isShow"></div>
    </transition>
</template>

animateJs(el, done){
    window.Velocity(el,"${this.selected}",{duration:${this.duration}})
}
        `;
      }
      return "";
    }
  }
};
</script>

<style lang='scss'>
*{
  margin: 0;
  padding: 0;
}
#app {
  margin: 0px auto;
  width: 100%;
  height:100vh;
  padding-top:20px;
  box-sizing: border-box;
  background: linear-gradient(91deg,#f1eefc,#9dc6ff 70%,#a5bcff);
  display: flex;
  flex-flow: column;
  align-items: center;
  .error {
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    font-size: 20px;

    width: 430px;
  }
  .code{
    width:800px;
    background:#ededed;
    border:2px solid gray;
    padding:5px 40px;
    border-radius: 10px;;
    font-size:20px;
  }
  .tip {
    width: 500px;
    height: 30px;
    padding-top:20px;
  
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    div {
      height: 100%;
      width: 200px;

      text-align: center;
      font-size: 20px;
      line-height: 30px;
    }
  }
  .demo-box {
    margin-top: 20px;
    height: 200px;
    width: 500px;
    overflow: hidden;
    position: relative;

    div {
      width: 200px;
      height: 100%;
      overflow: hidden;
      position: absolute;
      &:nth-of-type(1) {
        top: 0;
        left: 0;
        background-color: red;
      }
      &:nth-of-type(2) {
        top: 0;
        right: 0;
        background-color: blue;
      }
    }
  }
  .top {
    height: 50px;
    display: flex;
    align-items: center;
    .item {
      margin: 0 20px;
    }
    .select {
      select {
        height: 30px;
        line-height: 30px;
        font-size: 20px;
      }
    }
    .btn-click {
      height: 30px;
      line-height: 30px;
      padding: 0px 10px;
      text-align: center;
      border-radius: 5px;
      background-color: tomato;
      font-size: 16px;
      cursor: pointer;
    }
  }
  .option-box {
    height: 50px;
    display: flex;
    align-items: center;
    .item {
      margin: 0 20px;
    }
    .duration-option {
      input {
        margin: 0 5px 0 20px;
        font-size: 20px;
      }
    }
    .auto-option {
      display: flex;
      .label-auto {
        display: flex;
        align-items: center;
      }
      .input-auto {
        input {
          vertical-align: bottom;
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>